/*
 * Copyright (c) 2023 Huawei Technologies Co.,Ltd.
 *
 * openInula is licensed under Mulan PSL v2.
 * You can use this software according to the terms and conditions of the Mulan PSL v2.
 * You may obtain a copy of Mulan PSL v2 at:
 *
 *          http://license.coscl.org.cn/MulanPSL2
 *
 * THIS SOFTWARE IS PROVIDED ON AN "AS IS" BASIS, WITHOUT WARRANTIES OF ANY KIND,
 * EITHER EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO NON-INFRINGEMENT,
 * MERCHANTABILITY OR FIT FOR A PARTICULAR PURPOSE.
 * See the Mulan PSL v2 for more details.
 */

import Inula, { useState, useEffect } from "openinula";
import Echarts from "inula-echarts";

function App() {
  const [option, setOption] = useState({
    tooltip: {
      trigger: "item",
    },
    legend: {
      top: "5%",
      left: "center",
    },
    series: [
      {
        name: "Access From",
        type: "pie",
        radius: ["40%", "70%"],
        avoidLabelOverlap: false,
        padAngle: 5,
        itemStyle: {
          borderRadius: 10,
        },
        label: {
          show: false,
          position: "center",
        },
        emphasis: {
          label: {
            show: true,
            fontSize: 40,
            fontWeight: "bold",
          },
        },
        labelLine: {
          show: false,
        },
        data: [
          { value: 1048, name: "Search Engine" },
          { value: 735, name: "Direct" },
          { value: 580, name: "Email" },
          { value: 484, name: "Union Ads" },
          { value: 310, name: "Video Ads" },
        ],
      },
    ],
  });

  useEffect(() => {
    setInterval(() => {
      setOption({
        series: [
          {
            name: "Access From",
            type: "pie",
            radius: ["40%", "70%"],
            avoidLabelOverlap: false,
            padAngle: 5,
            itemStyle: {
              borderRadius: 10,
            },
            label: {
              show: false,
              position: "center",
            },
            emphasis: {
              label: {
                show: true,
                fontSize: 40,
                fontWeight: "bold",
              },
            },
            labelLine: {
              show: false,
            },
            data: [
              { value: Math.floor(Math.random() * 1000) + 1, name: "Search Engine" },
              { value: Math.floor(Math.random() * 1000) + 1, name: "Direct" },
              { value: Math.floor(Math.random() * 1000) + 1, name: "Email" },
              { value: Math.floor(Math.random() * 1000) + 1, name: "Union Ads" },
              { value: Math.floor(Math.random() * 1000) + 1, name: "Video Ads" },
            ],
          },
        ],
      });
    }, 2000);
  }, []);

  return (
    <div style={{ width: "50%", height: "50%" }}>
      <Echarts option={option} autoResize={true} />
    </div>
  );
}

Inula.render(<App />, document.getElementById("root"));
